<template>
  <div class="" style="padding: 15px;">
    <div class="cenBody">
      <img src="/src/status/logo.png" class="logo" alt="">
      <div class="title">H.S.国际问题研究平台</div>
      <!-- 下面的邮箱 -->
      <div class="mailbox">
        <div class="tit">账号邮箱/编号</div>
        <input type="text" class="inp" placeholder="输入账号邮箱/编号" v-model="qqYou" name="" id="">
      </div>
      <div class="mailbox">
        <div class="tit">登录密码</div>
        <input type="password" class="inp" placeholder="输入登录密码" v-model="passWord" name="" id="">
      </div>
      <!-- 登录 -->
      <div @click="login" class="login">登录</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { setToken } from '../../utils/auth';
import { userLogin } from '../../api/index';
import { ElMessage } from 'element-plus';
import router from '../../router';
let qqYou = ref('')
let passWord = ref('')

// 点击登录
const login = async () => {
  if (!qqYou.value || !passWord.value) {
    showToast('请输入完整账号密码');
  }
  let n = await userLogin({ account: qqYou.value, password: passWord.value })
  console.log(n, '0.0.0.00.0');
  if (n.code != 200) {
    ElMessage({
      message: n.msg,
      type: 'error',
    })
  } else {
    ElMessage({
      message: n.msg,
      type: 'success',
    })
    // 当登录成功的时候
    setToken(n.content.token)
    localStorage.setItem('userinfo', JSON.stringify(n.content))
    setTimeout(() => {
      router.push('/IndexMove')
    }, 1000);
  }

}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
  @return calc($px / 3.75) * 1vw;
}

.login {
  width: 100%;
  height: pxfn(44);
  line-height: pxfn(44);
  background: #32bbea;
  border-radius: pxfn(6);
  font-size: pxfn(14);
  font-family: PingFang SC, PingFang SC-400;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  margin-top: pxfn(30);
  margin-bottom: pxfn(30);
}

.mailbox {
  margin-bottom: pxfn(10);
  margin-top: pxfn(20);

  .tit {
    font-size: pxfn(14);
    font-family: PingFang SC, PingFang SC-400;
    font-weight: 400;
    text-align: LEFT;
    color: #4e5769;
    margin-bottom: pxfn(5);
  }

  .inp {
    width: 100%;
    height: pxfn(44);
    border: pxfn(1) solid #dadce0;
    border-radius: pxfn(6);
    padding-left: pxfn(10);
  }

  .inp::placeholder {
    color: #C2C5CC;
  }
}

.cenBody {
  padding: pxfn(20);
  background-color: #fff;
  border-radius: pxfn(20);
  margin-top: 50%;

  .logo {
    width: pxfn(50);
    height: pxfn(43);
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: pxfn(10);
  }

  .title {
    font-size: pxfn(20);
    font-family: PingFang SC, PingFang SC-600;
    font-weight: 600;
    text-align: center;
    color: #1d2129;
  }
}
</style>